<template>
     <div class="m-window applyLong-col" style="overflow: auto; overflow-x: hidden;">
        <!--金融审批长融提交申请表-->
        <el-row :gutter="10" class="header-btns-col">
            <el-col :span="2">
                <el-button type="primary" @click="backtrack">返回</el-button>
            </el-col>
        </el-row>
        <el-row style="margin-top: 60px;">
            <el-col :span="12">
                 <el-tabs>
                    <el-row class="content">
                        <el-col :span="12">
                            <table class="emphasis-table" >
                                <tr>
                                    <th>流程编号：</th>
                                    <td class="font-underline hit">{{general.itemNo}}</td>
                                </tr>
                                <tr>
                                    <th>供应商名称：</th>
                                    <td>{{general.custName}}</td>
                                </tr>
                                <tr>
                                    <th>融资产品：</th>
                                    <td>月有钱</td>
                                </tr>
                                <tr>
                                    <th>授信额度：</th>
                                    <td>{{getFormatCreditLine}}</td>
                                </tr>
                                <tr>
                                    <th>受理意见：</th>
                                    <td>{{general.applyRemark}}</td>
                                </tr>
                                <tr>
                                    <th>融资金额：</th>
                                    <td>{{getFormatApplyAmt}}</td>
                                </tr>
                                <tr>
                                    <th>融资开始日期：</th>
                                    <td>{{general.applyDate}}</td>
                                </tr>
                                <tr>
                                    <th>融资到期日期：</th>
                                    <td >{{general.prepaybackDate}}</td>
                                </tr>
                                <tr>
                                    <th>申请融资天数：</th>
                                    <td>{{getDayAmount}}</td>
                                </tr>
                                  <tr>
                                    <th>服务费率（不含税）：</th>
                                    <td>{{serviceRate}}</td>
                                </tr>
                                <tr>
                                    <th>利率（不含税）：</th>
                                    <td>{{showRate}}</td>
                                </tr>
                                <tr>
                                    <th>服务费（不含税）：</th>
                                    <td>{{getService}}</td>
                                </tr>
                                <tr>
                                    <th>利息（不含税）：</th>
                                    <td>{{getNumberRate}}</td>
                                </tr>
                                <tr>
                                    <th>应还款金额：</th>
                                    <td>{{getFormatApplyAmt}}</td>
                                </tr>
                                <tr>
                                    <th>申请人：</th>
                                    <td>{{general.custUser}}</td>
                                </tr>
                                <tr>
                                    <th>申请人手机：</th>
                                    <td>{{general.custPhone}}</td>
                                </tr>
                            </table>
                        </el-col>
                    </el-row>
                </el-tabs>
            </el-col>
        </el-row>
        
        <div style="margin-top:655px;margin-bottom: 28px;padding:0 10px;">
            <el-row>
                <div class="detail-headerd">
                    <label>关联对账函</label>                  
                </div>
                <el-col :span="12">
                    <ag-grid-vue class="m-agTableModel ag-theme-balham" :gridOptions="checkingGridOptions" :columnDefs="checkingColumnDefs" :rowData="checkingRowData"
                    v-loading="checkingLoading"
                    ></ag-grid-vue>
                </el-col>
            </el-row>
            <!-- <el-row v-if="processNumber">
                <div class="detail-headerd" >
                    <label>下载附件</label>          
                </div>
                <el-col :span="7">请下载<a  class="hit" @click="getFK">{{processNumber}}放款审批表.pdf</a></el-col>   
            </el-row> -->
            <el-row v-show="returnReason!=''">
                <el-col :span="12"  >
                    <label style="color:red;">退回原因</label>
                    <div class="returnReason">{{returnReason}}</div>
                </el-col>
            </el-row>
        </div>
     </div>
</template>
<style>

    .applyLong-col .el-tabs__content{
        overflow: initial;
    }
    .applyLong-col .el-tabs__nav-wrap::after{
        width: 0;
    }
    .applyLong-col .el-tabs__active-bar.is-top{
        left: 8px;
    }
    .applyLong-col .el-tabs__header{
        margin: 0;
    }
    .applyLong-col .el-tabs__item{
        padding: 0;
        padding-left: 8px !important;
        padding-right: 8px !important;
        height: 30px;
        line-height: 30px;
    }
    .applyLong-col .el-tabs__active-bar{
        width: 0 !important;
    }
    .applyLong-col .el-tabs__item.is-active::after{
        display: block;
        content:' ';
        position: absolute;
        height: 2px;
        width: 25px;
        background-color: #409EFF;
        bottom: 0;
        left: 50%;
        margin-left: -12.5px;
    }
    .applyLong-col .el-tabs__nav-scroll{
        padding-left: 10px;
    }
    .applyLong-col .el-tabs__content .content{
        margin-top: -22px;
    }
    .applyLong-col .el-input__inner{
        border: 0px;
        padding: 0 0 0 30px;
    }
    .flexs{
      display: flex !important;
    }
    .flexs span{
      padding: 10px 0 !important;
    }
    
    
</style>

<style  lang="less" rel="stylesheet/less" scoped >

.footer-btns-col,.header-btns-col{
    position:fixed;
    height: 60px;
    width: 100%;
    bottom: 0;
    z-index: 10;
    margin-left: -11px !important;
    box-sizing:border-box;
    display: flex;
    justify-content: center;
    align-items:center;
    background: #fff;
    padding: 10px 0;
    border-top: 1px solid #eee;
    /deep/ .el-button{
      margin-left: -84px;
    }
  }
  .header-btns-col{
    top: 0;
    justify-content: flex-start;
    border-top: none;
    border-bottom: 1px solid #eee;
    margin-top: 100px;
    /deep/ .el-button{
      margin-left: 8px;
    }
  }
    a.hit{
        color: #409EFF;
    }
    .applyLong-col{
        overflow: auto;
        color: #949494;
    }
    .applyLong-col .detail-table{
        width: 100%;
        border: 1px solid #eee;
    }
    .applyLong-col .detail-table td,.applyLong-col .detail-table th{
        border-left: 1px solid #eee;
        text-align: center;
        padding: 10px 0;
    }
    .applyLong-col .detail-headerd{
        padding: 10px 0;
    }
    .applyLong-col .detail-headerd .opts-col{
        float:right;
    }
    .applyLong-col .files-col{
        display: flex;
        flex-direction: row;
        flex-wrap:wrap;
        
    }
    .applyLong-col .files-col a{
        display: block;
        width: 250px;
        height: 60px;
        line-height: 60px;
        margin-right: 10px;
        border: 1px solid #eee;
        color: #818181;
        box-sizing: border-box;
        padding-right: 10px;
    }
    .applyLong-col .files-col i.icon{
        display: inline-table;
        width: 60px;
        text-align: center;
        height: 60px;
        line-height: 60px;
        border-right: 1px solid #eee;
        margin-right: 10px;
    }
    .emphasis-table{
        width: 100%;
        margin-top: 10px;
        td,th{
            border: 1px solid #eee;
            padding: 10px;
            width: 50%;
        }
        & tr:nth-child(even) th,& tr:nth-child(even) td{
            background: #F9FAFA;
        }
        .font-underline{
            text-decoration:underline;
        }
        .hit{
            color: #409EFF !important;
        }
        /deep/.el-input{
            width: 75% !important;
        }
    }
    .emphasis-table th{
         text-align: right
    }
    .emphasis-table td{
         text-align: left
    }
    .appL-input{
        border:none !important;
        height: 100%;
        width: 100%;
        padding: 0 15px;
        color: #606266;
        box-sizing: border-box;
    }
    .appL-input:focus{
        outline: none;
    }
        
</style>

<script>
import gridOptions from "lesso-common/public/gridOptions";
import constant from "@/public/constant";
import { mapState,mapGetters,mapActions} from "vuex";
import downloadFile from '@/util/fileDownload.js'
import { numberDiv,formatPrice,formatPriceEdit,regainOriginalMoneyFormat,formatRate,dateDiff,getSpecifyDate,numberMul,numberSub } from "@/util/format.js";

export default {
    props:["pageSourceCode",'applyId'],
    data() {
        return {
            whitelist:[],  //计算日期
            blacklist:[],    //计算日期
            applyLongForm:{
                backReason:''
            },

            //列表对象数据
            general:{},

            //页面列表
            checkingGridOptions: {},
            checkingColumnDefs: [],
            checkingRowData: [],
            checkingLoading: false,

            processNumber:"",
            finType:"",
            returnReason:''
        }
    },
    beforeMount(){
        // this.applyId = this.supplyChainFinance.role.ID
        this.applyId=this.applyId
        this.checkingGridOptions = gridOptions();
        this.checkingColumnDefs = [{
                // checkboxSelection: true, //是否显示复选框
                // headerCheckboxSelection: true, //是否显示全选框
                headerName: "对账函编号",
                field: "accountCode",
                width: 205,
            },
            {
                headerName: "买方公司",
                field: "companyName",
                width: 180
            },
            {
                headerName: "商务合同名称及编号",
                field: "contractNo",
                width: 250,
                valueFormatter: params => {
                    if(params.value){
                        return '《' + params.data.contractName + '》' + '（编号：' + params.value + '）'
                    }else{
                        return ''
                    }
                }
            },
            {
                headerName: "对账函月份",
                field: "letterMonth",
                width: 100
            },
            {
                headerName: "应收金额",
                field: "payBalance",
                width: 110,
                valueFormatter: params => {
                    return formatPrice(params.value)
                }
            },
            {
                headerName: "可融金额",
                field: "borrowBalance",
                width: 110,
                valueFormatter: params => {
                    return formatPrice(params.value)
                }
            },
            {
                headerName: "已融资金额",
                field: "finAmount",
                width: 110,
                valueFormatter: params => {
                    return formatPrice(params.value)
                }
            },
            {
                headerName: "融资状态",
                field: "finStatus",
                width: 100,
                cellRenderer: function (params) {
                    if (params.value != undefined && params.value == 1) {
                    return "部分融资";
                    } else if (params.value == 2) {
                    return "已融资";
                    } else {
                    return "未融资";
                    }
                }
            }
        ];
        this.getDays()
        this.getApplyInfo();
        this.getMakeData();
        this.getRefusedActivity();
    },
    created(){
        
    },
    methods: {
        ...mapActions(["changePageCode"]),
        backtrack(){
            this.changePageCode('')
        },
        
        getApplyInfo(){
            let _this=this;
            var params={
                id:this.applyId
            }
            this.$http.getApplyInfo(params).then(res=>{
                if(res.data.code==200){
                    let data=res.data.rows
                    this.general=res.data.rows;
                    this.general.itemNo = data.itemNo;
                    this.general.custName = data.custName;
                    this.general.applyUser = data.applyUser;
                    this.general.applyPhone = data.applyPhone;
                    this.general.custEsignBank = data.custEsignBank;
                    this.general.custEsignBankno = data.custEsignBankno;
                    this.general.custEsignContact = data.custEsignContact;
                    this.general.serviceRate = data.serviceRate;
                    this.general.custId = data.custId;
                    this.general.rate = data.rate;
                    this.general.applyAmt = data.applyAmt;
                    this.general.creditLine = data.creditLine;
                    this.general.applyRemark = data.applyRemark;
                    if(data.applyDate){
                        this.general.applyDate = data.payDate?data.payDate.substring(0,10):data.applyDate.substring(0,10);
                        this.general.prepaybackDate = data.paybackDate?data.paybackDate.substring(0,10):data.prepaybackDate.substring(0,10);
                    }
                    if(data.custId){
                        let params={
                            supplierId: data.custId,
                            accountNo:""
                        }
                        _this.getApplyLetterList(params);
                    }
                    
                }else{
                    this.$alert(res.data.info, {
                        confirmButtonText: "确定",
                        customClass: "alertFailure"
                    });
                }
            }).
            catch(err=>{
                this.loading=false;
                this.$alert("查询用户信息失败，请检查网络！", {
                    confirmButtonText: "确定",
                    customClass: "alertFailure"
                });
            })

        },
        async getDays(){
            let that = this
            await this.$http.getDays().then(({ data }) => {
                    if (data.code == 200 && data.rows) {
                    that.whitelist = data.rows.workdays
                    that.blacklist = data.rows.holidays
                    } else {
                        this.$alert(`获取数据失败：${data.info}`, {
                            confirmButtonText: "确定",
                            customClass: "alertFailure"
                        });
                    }
                }).catch(error => {
                this.$alert("查询日期数据失败，请检查网络！", {
                    confirmButtonText: "确定",
                    customClass: "alertFailure"
                })
            })
        },
        //获取实时对账函列表
        getApplyLetterList(params) {
            let that = this;
            that.checkingLoading = true
            that.checkingRowData = [];
            setTimeout(function () {
            that.$http.getApplyLetterList(params).then(response => {
                that.checkingLoading = false;
                if (response.data.code == 200) {
                    let rowDatas = response.data.rows;
                    rowDatas.forEach(element => {
                    element.letterNo = element.accountNo; //对账函编号
                    element.letterId = element.id; //对账函id
                    element.letterMonth = element.yMonth; //对账函月份
                    element.letterUrl = element.url; //对账函月份
                    });
                    that.checkingRowData = rowDatas;          
                } else {
                    this.$alert(response.data.info, {
                        confirmButtonText: "确定",
                        customClass: "alertFailure"
                    });
                    that.checkingRowData = [];
                }
                })
                .catch(error => {
                    console.log(error)
                    this.$alert('查询对账列表失败，请检查网络！', {
                        confirmButtonText: "确定",
                        customClass: "alertFailure"
                    });
                });
            }, 1);
        },
        //请求放款页面数据
        getMakeData(){
            var params={applyId:this.applyId}
            var _this=this;
            this.$http.getLoanInfo(params).then(res => {
                if(res.data.code==200){
                    if(res.data.rows){
                        _this.processNumber =res.data.rows.processNumber;
                        _this.finType=res.data.rows.finType
                    }
                    
                }else{
                    this.$alert(res.data.info, {
                        confirmButtonText: "确定",
                        customClass: "alertFailure"
                    });
                }
            })
            .catch(err => {
                this.$alert("查询数据失败，请检查网络！", {
                    confirmButtonText: "确定",
                    customClass: "alertFailure"
                });
            })
        },
        //请求pdf文件
        getFK(){
            var params={applyId:this.applyId}
            var _this=this;
            this.$http.getFKWordRZL(params).then(res => {
                if(res.data.code==200){
                    var url = res.data.rows[0].fileName;
                    var filename= res.data.rows[0].orgName
                    _this.fileDownload(filename,url)
                }else{
                    this.$alert(res.data.info, {
                        confirmButtonText: "确定",
                        customClass: "alertFailure"
                    });
                }
            })
            .catch(err => {
                this.$alert("下载文件失败，请检查网络！", {
                    confirmButtonText: "确定",
                    customClass: "alertFailure"
                });
            })
        },
        fileDownload(filename,url){
            var group = ''
            if (url.indexOf('SRM') > -1) {
            group = 'SRM'
            } else if (url.indexOf('SIGN') > -1) {
            group = 'SIGN'
            } else if (url.indexOf('TEST') > -1) {
            group = 'TEST'
            } else if (url.indexOf('MES') > -1) {
            group = 'MES'
            }
            let params = {
          'viewPath':url,
          'groupName':group,
          'fileName':filename
      }
      console.log('参数',params) 
      downloadFile(params,filename+'.pdf')
        //     let _this=this;
        //    this.$http.getFullFilePath({
        //     'url': url
        //     }).then(({ data }) => {
        //         if (data.code == 200) {
        //              download(filename,data.rows[0].fileName)
        //         } else {
        //             this.$alert(data.info, {
        //                 confirmButtonText: "确定",
        //                 customClass: "alertFailure"
        //             });
        //         }
        //     })
        //     .catch((error) => {
        //         this.$alert('下载文件失败，请检查网络！', {
        //                 confirmButtonText: "确定",
        //                 customClass: "alertFailure"
        //             });
        //     })
        },
        getRefusedActivity(){
            let params={applyId:this.applyId}
            this.$http.getRefusedActivity(params).then(({data})=>{
                if (data.code == 200 && data.rows) {
                    this.returnReason = data.rows.note || ''
                }
            }).catch(error=>{
                this.$alert('查询退回信息数据失败，请检查网络！', {
                        confirmButtonText: "确定",
                        customClass: "alertFailure"
                    });
            })
        },
    },
    components:{

    },
    computed: {
        
        getDayAmount() {
            let applyDay = dateDiff(
                this.general.applyDate,
                this.general.prepaybackDate
            );
            if(applyDay > 0){
                applyDay = applyDay - 1
            }
            this.general.dayAmount = applyDay
            return applyDay + "天";
        },
        getDayAmountTab2() {
            let applyDay = dateDiff(
                this.beginTime,
                this.endTime
            );
            if(applyDay > 0){
                applyDay = applyDay - 1
            }
            this.tabDayAmount = applyDay
            return applyDay + "天";
        },
        getFormatApplyAmt(){
            let money = this.general.actAmt?this.general.actAmt:this.general.applyAmt
            return formatPrice(money)+' 元'
        },
        getFormatCreditLine(){
            return formatPrice(this.general.creditLine)+' 元'
        },
        //显示利率
        serviceRate() {
        return formatRate(this.general.serviceRate) + "/年";
        },
        //显示利率
        showRate() {
        return formatRate(this.general.rate) + "/年";
        },
        //供应商列表显示
        getNumberRate(){
             let atLastApplyAmt  = this.general.actAmt ? this.general.actAmt:this.general.applyAmt
            let numberss = ((atLastApplyAmt * this.general.rate / 360) * this.general.dayAmount).toFixed(2)
            return formatPrice(numberss)+' 元';
        },
        getService(){           
             let atLastApplyAmt  = this.general.actAmt ? this.general.actAmt:this.general.applyAmt
            let numberss = ((atLastApplyAmt * this.general.serviceRate / 360) * this.general.dayAmount).toFixed(2)            
            return formatPrice(numberss)+' 元';
        },
        //金融编辑显示
        getRateFee(){
            let preDeductAmount
            let amount=regainOriginalMoneyFormat(this.amount)
            let numberss =numberMul(numberMul(amount,this.general.rate),this.tabDayAmount)
            let num
            if(numberss){
                num = numberss.toFixed(2); 
            }
            preDeductAmount = numberDiv(num,360)
            return formatPrice(preDeductAmount)+' 元';
        },
        getServiceFee(){
            let preDeductAmount
            let amount=regainOriginalMoneyFormat(this.amount)
            let numberss =numberMul(numberMul(amount,this.general.serviceRate),this.tabDayAmount)
            let num
            if(numberss){
                num=numberss.toFixed(2); 
            }
            preDeductAmount = numberDiv(num,360)
            return formatPrice(preDeductAmount)+' 元';
        },
         ...mapState(["supplierApplyList"])
  },
}
</script>
